<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <title>ad</title>
        <link rel="stylesheet" type="text/css" href="../css/api.css" />
        <style type="text/css">
            html,
            body {
                height: 100%;
            }
            
            .content .section {
                width: 100%;
                box-sizing: border-box;
                border-bottom: 1px solid #e8e8e8;
            }
            
            .content .pic img {
                width: 100%;
                display: block;
                margin: 0 auto;
            }
            
            .content .footer {
                color: #888;
                font-size: 12px;
                position: relative;
                padding-left: 45px;
                padding-right: 54px;
                height: 40px;
                line-height: 40px;
                box-sizing: border-box;
            }
            
            .content .icon {
                width: 24px;
                height: 24px;
                position: absolute;
                top: 8px;
                left: 15px;
            }
            
            .content .icon img {
                width: 24px;
            }
            
            .content .txt {
                width: 100%;
                color: #222;
                font-size: 12px;
            }
            
            .content .txt em {
                float: right;
                color: #a7a7a7;
            }
            
            .content .txt .zan {
                width: 36px;
                margin-left: 17px;
                text-align: right;
                font-size: 10px;
                color: #9e9e9e;
                background-image: url(../image/video/icn1.png);
                background-size: 18px 16px;
                background-repeat: no-repeat;
                background-position: left center;
            }
            
            .content .arrow {
                position: absolute;
                bottom: 0px;
                right: 10px;
                width: 31px;
                height: 40px;
                box-sizing: border-box;
                background-image: url(../image/video/icn2.png);
                background-size: 17px 3px;
                background-repeat: no-repeat;
                background-position: center center;
            }
            
            .kye {
                height: 10px;
                width: 100%;
                background-color: #f4f5f6;
                border-bottom: 1px solid #e8e8e8;
            }
        </style>
    </head>

    <body>
        <div class="content">
            <div class="section">
                <div class="pic" tapmode onclick="fnPlay()">
                    <img src="../image/video/video1.png" alt="">
                </div>
                <div class="footer">
                    <div class="icon">
                        <img src="../image/video/video1_1.png" alt="">
                    </div>
                    <div class="txt">一筒 <em class="zan">40</em><em>22万次播放</em></div>
                    <div class="arrow"></div>
                </div>
            </div>
            <div class="kye"></div>
            <div class="section">
                <div class="pic" tapmode onclick="fnPlay()">
                    <img src="../image/video/video2.png" alt="">
                </div>
                <div class="footer">
                    <div class="icon">
                        <img src="../image/video/video2_2.png" alt="">
                    </div>
                    <div class="txt">手工坊 <em class="zan">40</em><em>5万次播放</em></div>
                    <div class="arrow"></div>
                </div>
            </div>
            <div class="kye"></div>
            <div class="section">
                <div class="pic" tapmode onclick="fnPlay()">
                    <img src="../image/video/video3.png" alt="">
                </div>
                <div class="footer">
                    <div class="icon">
                        <img src="../image/video/video3_3.png" alt="">
                    </div>
                    <div class="txt">用武之地 <em class="zan">40</em><em>6万次播放</em></div>
                    <div class="arrow"></div>
                </div>
            </div>
            <div class="kye"></div>
            <div class="section">
                <div class="pic">
                    <img src="../image/video/video4.png" alt="">
                </div>
                <div class="footer">
                    <div class="icon">
                        <img src="../image/video/video4_4.png" alt="">
                    </div>
                    <div class="txt">秀色可餐 <em class="zan">40</em><em>2355次播放</em></div>
                    <div class="arrow"></div>
                </div>
            </div>
            <div class="kye"></div>
            <div class="section">
                <div class="pic" tapmode onclick="fnPlay()">
                    <img src="../image/video/video5.png" alt="">
                </div>
                <div class="footer">
                    <div class="icon">
                        <img src="../image/video/video5_5.png" alt="">
                    </div>
                    <div class="txt">二更 <em class="zan">40</em><em>6554次播放</em></div>
                    <div class="arrow"></div>
                </div>
            </div>
            <div class="kye"></div>
            <div class="section">
                <div class="pic" tapmode onclick="fnPlay()">
                    <img src="../image/video/video6.png" alt="">
                </div>
                <div class="footer">
                    <div class="icon">
                        <img src="../image/video/video6_6.png" alt="">
                    </div>
                    <div class="txt">秀逗 <em class="zan">40</em><em>3万次播放</em></div>
                    <div class="arrow"></div>
                </div>
            </div>
            <div class="kye"></div>
        </div>
    </body>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript">
        var videoPlayer;
        apiready = function() {
            videoPlayer = api.require('videoPlayer');
        };

        function fnPlay() {
            var videoPlayer = api.require('videoPlayer');
            videoPlayer.play({
                texts: {
                    head: {
                        title: '视频'
                    }
                },
                styles: {
                    head: {
                        bg: 'rgba(0.5,0.5,0.5,0.7)',
                        height: 44,
                        titleSize: 16,
                        titleColor: '#fff',
                        backSize: 20,
                        backImg: 'fs://img/back.png',
                        setSize: 20,
                        setImg: 'fs://img/set.png'
                    },

                },
                path: 'http://resource.apicloud.com/video/apicloud3.mp4',
                autoPlay: true
            });
        }
    </script>

</html>
